import React from "react";
// import { Map, List, Seq, fromJS, Range } from "immutable";

const App = () => {
  //! 定义immutable对象
  // const map1 = Map({
  //   a: 3,
  //   b: 4,
  // });
  // 获取immutable对象的值
  // console.log(map1.get("a"));
  // console.log(map1.get("b"));

  // 修改immutable对象的值
  // immutable对象是创建以后就不能再被修改了，对它的任意操作只能返回一个新的immutable对象
  // 持久化数据结构
  // const map2 = map1.set("a", 3);
  // toJS代码里面不能用, 只能在调试的时候用
  // console.log(map2.toJS());

  // console.log(map1 === map2); // false
  // console.log(map1.equals(map2)); // false equals表示里面的值是否每个都一样

  // const map1 = Map({
  //   a: 3,
  //   b: 4,
  // });
  // const map2 = Map({
  //   a: 3,
  //   b: 4,
  // });
  // console.log(map1 === map2); // false
  // console.log(map1.equals(map2)); // true

  //! 定义immutable数组
  // immutable数组的很多方法和原生js的数组方法名字相同
  // const list1 = List([1, 2]);
  // const list2 = list1.push(3, 4, 5);
  // const list3 = list2.unshift(0);
  // const list4 = list1.concat(list2, list3);
  // console.log(list4.toJS());
  // console.log(list4.size);

  //! 对象和数组的合并
  // 对象合并使用merge方法，immutable对象可以合并普通对象
  // const map1 = Map({
  //   a: 1,
  //   b: 2,
  // });
  // const map2 = Map({
  //   c: 3,
  //   b: 4,
  // });
  // const map3 = map1.merge({ c: 3 });
  // console.log(map3);

  // 数组合并用concat方法, immtable数组可以合并普通数组
  // const list1 = List([1, 2, 3]);
  // const list2 = List([4, 5, 6]);
  // const list3 = list1.concat(list2);
  // console.log(list3);

  //! 可以使用Seq来定义对象和数组
  // const map1 = Seq({
  //   a: 3,
  //   b: 4,
  // });
  // console.log(map1);
  // const list1 = Seq([1, 2, 3]);
  // console.log(list1);

  // seq具有惰性,会结论出发,尽可能地少做计算
  // const oddSquares = Seq([1, 2, 3, 4, 5, 6, 7, 8])
  //   .filter((x) => {
  //     console.log("filter x:" + x);
  //     return x % 2 !== 0;
  //   })
  //   // [1,3,5,7]
  //   .map((x) => {
  //     console.log("map x:" + x);
  //     return x * x;
  //   });
  // // [1,9,25,49]
  // console.log(oddSquares.get(1));

  //! fromJs也可以定义对象和数组
  // const map1 = fromJS({
  //   a: 3,
  //   b: 4,
  // });
  // console.log(map1);
  // const list1 = fromJS([1, 2, 3]);
  // console.log(list1);

  // Map只会转换第一层，fromJs可以递归地转换很多层
  // const map1 = Map({
  //   a: 3,
  //   b: {
  //     x: 10,
  //   },
  // });
  // console.log(map1);
  // const map2 = fromJS({
  //   a: 3,
  //   b: {
  //     x: 10,
  //   },
  // });
  // console.log(map2);

  // 如果改变后的值需要依赖改变前的值，就需要使用update方法
  // const map1 = Map({
  //   a: 3,
  //   b: 4,
  // });
  // const map2 = map1.update("a", (v) => v + 1);
  // console.log(map2.toJS());

  //!! 重要
  // const nested = fromJS({ a: { b: { c: [3, 4, 5] } } });
  // // console.log(nested);
  // // Map { "a": Map { "b": Map { "c": List [ 3, 4, 5 ] } } }
  // const nested2 = nested.mergeDeep({ a: { b: { d: 6 } } });
  // // console.log(nested2);
  // // Map { "a": Map { "b": Map { "c": List [ 3, 4, 5 ], "d": 6 } } }

  // // 获得d的值
  // // getIn获取到深层的值,里面接收一个参数是数组
  // console.log(nested2.getIn(["a", "b", "d"]));
  // // setIn修改到深层的值
  // const nested3 = nested2.setIn(["a", "b", "d"], 9);
  // console.log(nested3.toJS());
  // const nested4 = nested2.updateIn(["a", "b", "d"], (v) => v * 2);
  // console.log(nested4.toJS());

  // const aRange = Range(1, Infinity)
  //   .skip(1000)
  //   .map((n) => -n)
  //   .filter((n) => n % 2 === 0)
  //   .take(2)
  //   // [-1002, -1004]
  //   .reduce((r, n) => r * n, 1);

  // console.log(aRange);

  return (
    <>
      <h2>immutable</h2>
      <input type="range" />
    </>
  );
};

export default App;
